<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{
            color: #433b90;
        }
        a:visited{
            color: #f27c01;
        }
        a:hover{
            color: #78b917;
        }
        a:active{
            color: #7c7c7c;
        }
        a:focus{
            color: #d40112;
        }

        input:enabled{
            background: #78b917;
        }
        input:disabled{
            background: #433b90;
        }
    </style>
</head>
<body>
<!--
1. 动态伪类
    这些伪类并不存在html中，只有当用户和页面交互的时候才能提现出来
        描点伪类
            :link       超链接自带效果，蓝色
            :visited    自带效果，点击之后变成紫色
        用户行为伪类
            :hover      鼠标经过的时候
            :active     鼠标点击下去的时候
            :focus      表单中加载后自动获取焦点

2. UI元素状态伪类
    把:enabled,:disabled,:checked称之为UI元素状态伪类
        :enabled    可输入状态
        :disabled   不可输入
        :checked    单选框和复选框中选中状态(可以无视)
-->
<p>动态伪类</p>
<a href="#" class="one">测试连接1</a>
<p>UI元素状态伪类</p>
<input type="text" placeholder="可输入状态">
<input type="text" placeholder="不可输入状态" disabled>

</body>
</html>